<style type="text/css">
    .zan{
        cursor:pointer;
    }
</style>
<div class="wenda-detail-sumit detail-sumit-ask">
    <h2 class="common-h2">发表评论</h2>
    <textarea class="wenda-my" id="answer" placeholder="登录后参与评论..." name=""cols="30" rows="10"></textarea>
    <button class="f-r wenda-submit" onclick="answerQ(${vo.id})">发表评论</button>

    <ul class="answer" style="clear:both">
    <#if cvs??>
        <#list cvs as cv>
            <li>
                <div class="pic">
                    <a href="${base}/profile?userId=${cv.commentAuthor!''}">
                        <#if cv?? && cv.commentAuthorPhoto??>
                            <img width="100%" id="userPic"  src="${base}/system/getImg?imgId=${cv.commentAuthorPhoto!''}&w=88" alt="">
                        <#else>
                            <img width="100%" id="userPic" src="${base}/client/images/pic/myself/user.png" alt="">
                        </#if>
                    </a>
                </div>
                <h5><a href="${base}/profile?userId=${cv.commentAuthor!''}">${cv.commentAuthorName!''}</a></h5>
                <div class="time">${cv.createTimeStr}</div>
                <p class="ans">${cv.commentContent!''}</p>
                <div class='zan' onclick='up(this,${cv.id})'><img src='${base}/client/images/pic/wenda/zan.png' alt=''><span class='zan_count'>${cv.likes}</span></div>
            </li>
        </#list>
    </#if>
    </ul>

</div>
<script type="text/javascript">
    var answerQ = function(id){
        var content = $("#answer").val().trim();
        if(content.length == 0){ alert("请输入内容！"); return false;}

        if(content.length > 100){ alert("不能超过100字"); return false;}

        jQuery.ajax({
            type: "POST",
            url: '${base}/post/answer',
            dataType:"json",
            data: {"id":id,"content":content},
            success: function(data){
                if(data.status == 1) {
                    data = data.data;
                    var userPhotoSrc = "${base}/client/images/pic/myself/user.png";
                    if(data.commentAuthorPhoto != null && data.commentAuthorPhoto != ''){
                        userPhotoSrc = "${base}/system/getImg?imgId="+ data.commentAuthorPhoto;
                    }
                    $(".answer").append("<li>"+
                            "<div class='pic'>"+
                            "<a href='${base}/profile?userId=" + data.commentAuthor +"'><img width='100%' src='"+ userPhotoSrc +"' alt=''></a>"+
                            "</div>"+
                            "<h5><a href='${base}/profile?userId=" + data.commentAuthor +"'>"+ data.commentAuthorName +"</a></h5>"+
                            "<div class='time'>"+ data.createTimeStr+"</div>"+
                            "<p class='ans'>"+data.commentContent+"</p>"+
                            "<div class='zan' onclick='up(this,"+data.id+")'><img src='${base}/client/images/pic/wenda/zan.png' alt=''><span class='zan_count'>"+ data.likes +"</span></div>"+
                            "</li>");
                    $("#answer").val("");
                }else if(data.status == -1){
                    alert("您还没有登录，请登录！");
                    location.replace("${base}/login?redirect_url=" + window.location.href);
                }
            },
            error: function (obj){
                console.info(obj);
            }
        });
    };

    var up = function(obj,id){
        console.info(obj);
        if ($(obj).hasClass('done')) {
            alert("您已赞过！");
            return false;
        } else {
            $(obj).addClass('done');
            var rateHolder = $(obj).children('.zan_count');
            var ajax_data = {
                id: id
            };
            $.post("${base}/posts_answer/up", ajax_data,
                    function (data) {
                        $(rateHolder).html(data.data);
                    });
            return false;
        }
    }
</script>